<template>
  <div class="dicts-list">
    <template v-if="flag">
      <el-table :data="tableData">
        <el-table-column prop="id" label="id" width="100px"> </el-table-column>
        <el-table-column prop="dictCode" label="字典编号" width="500px">
        </el-table-column>
        <el-table-column prop="dictName" label="字典名称" width="150px">
        </el-table-column>
        <el-table-column prop="dictKey" label="字典键值" width="200px">
        </el-table-column>
        <el-table-column prop="dictParentId" label="上级字典" width="500px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="amendNews(scope.row)"
              >编辑</el-button
            >
            <el-button type="warning" @click="removeNews(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else>
      <h2 class="new-title">编辑新闻</h2>
      <el-form
        ref="newsRef"
        :model="form"
        label-width="80px"
        :rules="rules"
        class="newsform"
      >
        <el-form-item label="id" prop="id">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="新闻标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="time">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.time"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="特殊资源" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="1">热门</el-radio>
            <el-radio label="2">新闻</el-radio>
            <el-radio label="3">公告</el-radio>
            <el-radio label="4">活动</el-radio>
            <el-radio label="5">赛事</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="新闻内容" prop="content">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="HandleEditNews">修改</el-button>
          <el-button @click="NoEditNews">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>
<script>
import { getDicts } from '@/api/dicts'
export default {
  data() {
    return {
      tableData: [],
      size: 1000,
      num: null,
      min: 0,
      max: 10,
      currentPage: null,
      flag: true,
      form: {
        id: '',
        title: '',
        time: '',
        content: '',
        type: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择种类', trigger: 'change' }],
        content: [
          { required: true, message: '请填写新闻内容', trigger: 'blur' },
          {
            min: 10,
            message: '长度至少10个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await getDicts()
      this.tableData = res.data.data
    }
  }
}
</script>
<style lang="scss" scoped>
</style>